<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	  <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> 

</head>
<body>
<form>
    <input type="file" name="image" id="file">
    <input type="hidden"  value="" id="dizhi" name="suoluetu">
    <br>
     <button onclick="return false;" id="sub">点击上传</button>
     <br>
     <div id="content"></div>
</form>

    <button class="btn">button</button>

    <script type="text/javascript">
　　//获取button，注册点击事件，点击button时，控制台打印‘this is a btn’
    $('.btn').click(function(){
        console.log('this is a btn');
    });

    $('#sub').click(function(){
    	 ajaxPost();
    })

     
     function ajaxPost(){
     	 var formData = new FormData();
           // console.log($('#file')[0]);
         if ($('#file')[0].files.length<=0) {
         	 alert("请选择文件");
         	 return;
         }
         //console.log($('#file')[0].files[0]);

         formData.append('image',$('#file')[0].files[0]);
          
          $.ajax({
               type:'post',
               url:"{:url('huandengpian/picture')}",
               data:formData,
               cache:false,
               contentType:false,
               success:function(data){
                  if (data) {
                       var html='<img src="'+data.src+'" width="480" height="135">'
                       $('#content').html(html);
                       $('[name=suoluetu]').val(data.src);
                  }else{
                         alert("上传失败");
                  }

               }

          })





     } 
    </script>
</body>
</html>